<template>
  <div class="home">
    <NavIndex></NavIndex>

    <div class="background">
      <div class="content">
        <div class="title-number">No.1</div>
        <div class="title">Cloud Good</div>
        <p class="description">欢迎来到云慧学习社区，这里是一个集监督、学习和交流于一体的平台。</p>
        <button class="more-details" @click="goToStatus">我的近期状态</button>
      </div>
      <!-- <div class="navigation-buttons">
        <button class="nav-btn prev">&#10094;</button>
        <button class="nav-btn next">&#10095;</button>
      </div> -->
    </div>
  </div>
</template>

<script>
import { onMounted, onUnmounted } from 'vue';
import NavIndex from "@/components/topNav/topNavIndex.vue";
import { useRouter } from 'vue-router';
export default {
  name: 'HomeIndex',
  components: {
    NavIndex
  },
  
  setup() {
    const router = useRouter();
    const handleScroll = () => {
      const background = document.querySelector('.background');
      const scrollY = window.scrollY;
      if (scrollY !== 0) {
        background.style.backgroundPosition = `calc(50% + ${scrollY}px) calc(50% + ${scrollY}px)`;
      } else {
        background.style.backgroundPosition = '';
      }
    };

    onMounted(() => {
      window.addEventListener('scroll', handleScroll);
    });

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll);
    });
    
    const goToStatus = () => {
      console.log('跳转到状态页面');
      router.push('/status');
    };
    
    // 返回方法，使其在模板中可用
    return {
      goToStatus
    };
  }
};
</script>

<style scoped>
.home {
  height: 100vh;
  position: relative;
}


.background {
  background-image: url('./imgs/img1.png');
  background-size: cover;
  background-position: 50% 50%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-left: 10%;
}

.content {
  color: white;
  text-align: left;
  max-width: 600px;
}

.title-number {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.title {
  font-size: 4.5rem;
  font-weight: 900;
  color: white;
  margin-bottom: 1.5rem;
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.description {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.8);
}

.more-details {
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: 2px solid white;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.more-details:hover {
  background: white;
  color: black;
}

.navigation-buttons {
  position: absolute;
  bottom: 2.5rem;
  right: 2.5rem;
  display: flex;
  gap: 0.625rem;
}

.nav-btn {
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid white;
  background: transparent;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.nav-btn:hover {
  background: white;
  color: black;
}
</style>